<template>
  <div>
    <div class="col-sm1">
      <el-input
          style="width: 200px"
          placeholder="请输入部门名称"
          v-model="deptName">
      </el-input>
      <el-tree
          class="filter-tree"
          :data="deptTreeData"
          :props="deptTreeProps"
          @node-click="handleNodeClick"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree">
      </el-tree>
    </div>
    <div class="col-sm2">
      <el-form :inline="true" ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名称">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select v-model="form.status" placeholder="用户状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
              v-model="createTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              :default-time="['00:00:00', '23:59:59']"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="userList(1)">查询</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button type="primary" @click="toAdd">添加</el-button>
        <el-button type="success" @click="selectUser">修改</el-button>
        <el-button type="danger" @click="deleteUser">删除</el-button>
        <el-button type="info" @click="usersImport">导入</el-button>
        <el-button type="warning" @click="exportUsers">导出</el-button>
      </el-row>
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection" width="55">
        </el-table-column>
        <el-table-column
            label="用户编号"
            prop="userId"
            width="120">
        </el-table-column>
        <el-table-column
            prop="userName"
            label="用户名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="nickName"
            label="用户昵称"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="deptName"
            label="部门"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="nickName"
            label="用户昵称"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="phoneNumber"
            label="手机号"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            label="状态"
            show-overflow-tooltip>
          <template scope="ss">
            <el-switch
                v-model="ss.row.status"
                active-value="0"
                inactive-value="1"
                @change="updateUserStatus(ss.row.status,ss.row.userId)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            label="操作"
            show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[1, 2, 3, 4,5,6]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
      </div>
      <!--添加表单-->
      <el-dialog title="角色添加" :visible.sync="dialogAddFrom">
        <el-form  :inline="true" label-position:left :model="addForm">
          <el-row>
            <el-col :span="10">
              <el-form-item label="用户昵称" :label-width="formLabelWidth">
                <el-input v-model="addForm.nickName" autocomplete="off" placeholder="请输入用户昵称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="所属部门" :label-width="formLabelWidth">
                <el-select v-model="addForm.deptId" placeholder="请选择所属部门">
                  <el-option :label=deptLabel :value=deptValue STYLE="height:300PX">
                    <el-tree :data="deptTreeData" :props="deptTreeProps" @node-click="deptAdd"></el-tree>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="手机号码" :label-width="formLabelWidth">
                <el-input v-model="addForm.phoneNumber" autocomplete="off" placeholder="请输入手机号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="addForm.email" autocomplete="off" placeholder="请输入用户邮箱"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="用户名称" :label-width="formLabelWidth">
                <el-input v-model="addForm.userName" autocomplete="off" placeholder="请输入用户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="用户密码" :label-width="formLabelWidth">
                <el-input  v-model="addForm.password" autocomplete="off" show-password ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="用户性别" :label-width="formLabelWidth">
                <el-select v-model="addForm.sex" placeholder="请选择用户性别">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio-group v-model="addForm.status">
                  <el-radio label="0">正常</el-radio>
                  <el-radio label="1" >停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="岗位" :label-width="formLabelWidth">
                <el-select v-model="addForm.postIds" :multiple="true" placeholder="请选择岗位">
                  <el-option v-for="post of posts" :label = "post.postName" :value="post.postId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="角色" :label-width="formLabelWidth">
                <el-select v-model="addForm.roleIds" :multiple="true" placeholder="请选择角色">
                  <el-option v-for="role of roles" :label = "role.roleName" :value="role.roleId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input type="textarea" :rows="4" style="width: 750px"  placeholder="请输入内容" v-model="addForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFrom = false">取 消</el-button>
          <el-button type="primary" v-if="addAndUpdate===1" @click="userAdd(addForm)">确 定</el-button>
          <el-button type="primary" v-if="addAndUpdate===0" @click="updateUser(addForm)">修改</el-button>
        </div>
      </el-dialog>
      <el-dialog title="用户导入" :visible.sync="dialogFormImport">
        <el-upload
            class="upload-demo"
            action="http://localhost:6785/users/import"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button size="small" @click="doLoad">下载模板</el-button>
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormImport= false">取 消</el-button>
          <el-button type="primary" @click="dialogFormImport = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  watch: {
    deptName(val) {
      console.log(val);
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      deptName:'',
      deptTreeData:[],
      deptTreeProps: {
        label: 'deptName',
        children: 'children'
      },
      deptLabel:'',
      deptValue:'',
      addAndUpdate:'',
      createTime:[],
      pageNum:1,
      pageSize:3,
      total:0,
      roles:[],
      posts:[],
      form: {
        deptId:'',
        userName: '',
        phoneNumber: '',
        status: '',
        createStartTime:'',
        createEndTime:''
      },
      tableData: [],
      userId:[],
      dialogAddFrom: false,
      dialogFormImport:false,
      addForm: {
        userId:'',
        nickName:'',
        deptId:'',
        phoneNumber:'',
        email:'',
        userName:'',
        password:'',
        sex:'',
        status:'',
        postIds:[],
        roleIds:[],
        remark:''
      },
      formLabelWidth: '120px',

    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      this.userId = val.map(sss=>sss.userId);
    },
    //列表
    userList(num) {
      const params= this.form;
      params.createStartTime=this.createTime[0];
      params.createEndTime=this.createTime[1];
      if (num===2){
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
      }else {
        params.pageNum = 1;
      }
      this.axios.get("http://localhost:6785/users/select",{params}).then(res=>{
        console.log(res.data.list.list);
        console.log(res.data.list);
        this.tableData=res.data.list.list;
        this.total=res.data.list.total;
        this.pageNum=res.data.list.pageNum;
        this.pageSize=res.data.list.pageSize;
      })
    },
    toAdd(){
      this.addAndUpdate=1;
      this.dialogAddFrom=true;
      this.addForm={};
    }
    ,
    //添加
    userAdd(addForm){
     this.dialogAddFrom = false;
      console.log(addForm)
     this.axios.post("http://localhost:6785/users/add",addForm).then(res=>{
       console.log(res.data.message);
       this.userList();
     })
    },
    //查询指定用户信息
    selectUser(){
      this.addAndUpdate=0;
      if (this.userId.length<1){
        this.$message({
          message: '请选择一个用户',
          type: 'warning'
        });
      }else if (this.userId.length>1){
        this.$message({
          message: '最多只可选择一个用户',
          type: 'warning'
        });
      }else {
        this.dialogAddFrom=true;
        this.axios.get("http://localhost:6785/users/select/by/id?userId="+this.userId[0]).then(res=>{
          this.addForm=res.data.data;
          console.log(this.addForm);
        })
      }
    },
    //修改用户
    updateUser(addForm){
      this.axios.post("http://localhost:6785/users/update",addForm).then(res=>{
        console.log(res.data.message);
      })
    },
    //修改用户状态
    updateUserStatus(status,userId){
      this.axios.get("http://localhost:6785/users/update/status?userId="+userId+"&status="+status).then(res=>{
        console.log(res.data.message);
      })
    },
    //删除
    deleteUser(){
      if (this.userId.length<1){
        this.$message({
          message: '请选择一个用户',
          type: 'warning'
        });
      }else {
        this.axios.delete("http://localhost:6785/users/del?userId="+this.userId).then(res=>{
          console.log(res.data.message);
          this.userList()
        })
      }
    },
    //导出
    exportUsers(){
      const params= this.form;
      params.createStartTime=this.createTime[0];
      params.createEndTime=this.createTime[1];
      window.location.href="http://localhost:6785/users/export?params="+ encodeURI(JSON.stringify(params));
    },
    //导入
    usersImport(){
      this.dialogFormImport=true;
    },
    //下载模板
    doLoad(){
      window.location.href="http://localhost:6785/users/doLoad";
    },
    //每页多少条数据
    handleSizeChange(val) {
      this.pageSize=val;
      this.userList(2);
    },
    //查询第几页数据
    handleCurrentChange(val) {
      this.pageNum = val;
      this.userList(2);
    },
    //获取角色列表
    rolesAllList(){
      this.axios.get("http://localhost:6785/roles/select/all").then(res=>{
        console.log(res.data.list);
        this.roles=res.data.list;
      })
    },
    //获取部门树形结构
    deptTree(){
      this.axios.get("http://localhost:6785/dept/dept/tree").then(res=>{
        console.log(res.data.data);
        this.deptTreeData = res.data.data;
      })
    },
    //筛选部门树形结构
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },
    //部门树形点击查询
    handleNodeClick(data){
      this.form.deptId=data.deptId;
      this.userList();
    },
    //添加用户部门选择
    deptAdd(data){
      this.deptLabel=data.deptName;
      this.deptValue=data.deptId;
      this.addForm.deptId = data.deptId;
        console.log(data);
    },
    //获取所有岗位信息
    postAll(){
      this.axios.get("http://localhost:6785/post/select/All").then(res=>{
        this.posts=res.data.list;
        console.log(this.posts);
      })
    }
  },
  created() {
    this.userList();
    this.deptTree();
    this.rolesAllList();
    this.postAll();
  }
}
</script>
<style>
.col-sm1{
  display:inline-block;
  width: 18%;
  height: 100vh;
  float: left;
}
.col-sm2{
  display:inline-block;
  width: 82%;
  height: 100vh;
  float: left;
}
</style>